<template>
    <div id="loglist">
        <el-card class="box-card"
                 style="background: #F9FAFC"
                 ref="toolsbar">
            <el-row class="toolsButtons">
                <el-button type="primary"
                           class="loginManManager"
                           icon="setting"
                           @click="loginManSettingDialog= true">
                </el-button>
                <el-button type="success"
                           class="logEditor"
                           icon="plus"
                           v-if="loginMan"
                           @click="onNewLogDialogOpen">{{ loginMan.desc }}
                </el-button>
            </el-row>

            <!--数据展示-->
            <el-row :gutter="10">
                <el-col :span="4">
                    <el-card class="box-card">
                        <!--日历-->
                        <el-row>
                            <div class="grid-content bg-purple">
                                <el-date-picker v-model="day"
                                                class="logListDatePicker"
                                                style="width: 100%;"
                                                type="date"
                                                placeholder="选择日期"
                                                format="yyyy-MM-dd"
                                                :picker-options="datePickerOpt"
                                                @change="onDateChanged">
                                </el-date-picker>
                            </div>
                        </el-row>
                        <!--人员-->
                        <el-row>
                            <el-tree :data="mans"
                                     class="manList"
                                     highlight-current
                                     :props="manProps"
                                     node-key="name"
                                     @node-click="onManClick">
                            </el-tree>
                        </el-row>
                    </el-card>
                </el-col>
                <!--日志摘要和内容-->
                <el-col :span="3">
                    <el-card class="box-card">
                        <el-table :data="tableData"
                                  class="logSummaryTable"
                                  highlight-current-row
                                  @current-change="onTableSelectChanged"
                                  style="width: 100%">
                            <el-table-column prop="summary"
                                             label="summary">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <el-col :span="17">
                    <el-card class="box-card log-content">
                        <span v-html="compiledMarkdown"></span>
                    </el-card>
                </el-col>
            </el-row>
        </el-card>
        <!--账号编辑/增加-->
        <el-dialog title="账号编辑"
                   class="accountDialog"
                   :visible.sync="accountEditDialogVisible">
            <el-form :model="accountEditForm">
                <el-form-item label="账号"
                              label-width="100">
                    <el-input v-model="accountEditForm.name"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名"
                              label-width="100">
                    <el-input v-model="accountEditForm.desc"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="accountEditDialogVisible=false">取消</el-button>
                <el-button @click="onManEditConfirmClick">确定</el-button>
            </span>
        </el-dialog>
        <!--账号管理-->
        <el-dialog title="账号管理" class="loginManSettings"
                   :visible.sync="loginManSettingDialog">
            <el-table :data="mans"
                      height="300"
                      style="width: 100%">
                <el-table-column prop="name"
                                 label="账号"></el-table-column>
                <el-table-column prop="desc"
                                 label="姓名"></el-table-column>
                <el-table-column label="操作"
                                 prop="name">
                    <template scope="scope">
                        <el-button @click="onManEditClick(scope.row.name, scope.row.desc, false)"
                                   type="text"
                                   size="small">编辑
                        </el-button>
                        <el-button @click="onManRemoveClick(scope.row.name, scope.row.desc)"
                                   type="text"
                                   size="small">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="onManEditClick('','', true)">添 加</el-button>
                <el-button @click="loginManSettingDialog= false">关 闭</el-button>
            </span>
        </el-dialog>
        <!--日志编辑-->
        <el-dialog title="日志编辑"
                   class="logDialog"
                   :visible.sync="newLogDialog">
            <el-form :model="newLogForm">
                <el-form-item label="摘要"
                              label-width="100">
                    <el-input v-model="newLogForm.summary"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="正文"
                              label-width="100">
                    <el-input v-model="newLogForm.content"
                              :rows="5"
                              type="textarea"
                              auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="newLogForm.day"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    :picker-options="datePickerOpt"
                                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="newLogDialog= false">取 消</el-button>
                <el-button type="primary"
                           @click="onNewLogDialogConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!--确认删除账号-->
        <el-dialog :visible.sync="manRemoveDialogVisible" title="确认删除"
                   size="tiny" class="manRemoveDialog">
            <el-form :model="manConfirmRemoveDialogForm">
                <el-form-item label="是否确认删除">
                    <span>{{ manConfirmRemoveDialogForm.manDesc }} ?</span>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="manRemoveDialogVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="onConfirmManRemove">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import {
        markdown
    } from 'markdown'
    export default {
        data: function () {
            return {
                newLogDialog: false,
                manRemoveDialogVisible: false,
                loginManSettingDialog: false,
                accountEditDialogVisible: false,
                accountEditForm: {
                    name: '',
                    desc: '',
                    isAdd: false
                },
                manConfirmRemoveDialogForm: {
                    manName: '',
                    manDesc: ''
                },
                newLogForm: {
                    summary: '',
                    content: '',
                    day: {},
                    user: ''
                },
                loginMan: '',
                tableData: [],
                day: '',
                mans: [],
                logContent: '请使用MarkDown格式进行编辑',
                datePickerOpt: {
                    shortcuts: [{
                        text: '今天',
                        onClick (picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick (picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                manProps: {
                    label: 'desc'
                }
            }
        },
        methods: {
            onManEditClick (name, desc, isAdd) {
                this.accountEditForm.isAdd = isAdd
                if (isAdd === true) {
                    this.accountEditForm.name = ''
                    this.accountEditForm.desc = ''
                }
                else {
                    this.accountEditForm.name = name
                    this.accountEditForm.desc = desc
                }
                this.accountEditDialogVisible = true
            },
            onManEditConfirmClick () {
                let json = {}
                json.name = this.accountEditForm.name
                json.desc = this.accountEditForm.desc
                if (this.accountEditForm.isAdd === false) {
                    this.$axios.put(this.$api.API_USER + '/' + this.accountEditForm.name, json).then(res => {
                        this.loadMans()
                        this.accountEditDialogVisible = false
                    })
                } else {
                    this.$axios.post(this.$api.API_USERS, json).then(res => {
                        this.loadMans()
                        this.accountEditDialogVisible = false
                    })
                }
            },
            onConfirmManRemove () {
                let name = this.manConfirmRemoveDialogForm.manName || ''
                this.$axios.delete(this.$api.API_USER + '/' + name).then(res => {
                    this.loadMans()
                    this.manRemoveDialogVisible = false
                }).catch(function (err) {
                    console.log(err)
                })
            },
            onManRemoveClick (name, desc) {
                this.manRemoveDialogVisible = true
                this.manConfirmRemoveDialogForm.manName = name
                this.manConfirmRemoveDialogForm.manDesc = desc
            },
            onNewLogDialogOpen (evt) {
                this.newLogForm.user = ''
                this.newLogForm.day = this.today
                this.newLogForm.summary = ''
                this.newLogForm.content = ''
                this.newLogDialog = true
            },
            onNewLogDialogConfirm (evt) {
                this.newLogForm.user = this.loginMan.name
                this.$nextTick(() => {
                    this.$axios.post(this.$api.API_LOGS, this.newLogForm).then(res => {
                        this.loadLogs()
                        this.newLogDialog = false
                    })
                })
            },
            onTableSelectChanged (evt) {
                if (evt) {
                    this.logContent = evt.content || ''
                }
            },
            onDateChanged (date) {
                this.day = date
                this.loadLogs()
            },
            loadMans () {
                this.$nextTick(() => {
                    this.$axios.get(this.$api.API_USERS).then(res => {
                        this.mans = res.data
                    })
                })
            },
            onManClick (data) {
                this.loginMan = data
                this.loadLogs()
            },
            loadLogs () {
                let get_url = ''
                let m = this.loginMan.name || ''
                let d = this.day || ''
                let log_api = this.$api.API_LOGS
                if (m && d) {
                    get_url = log_api + '/' + m + '/' + d
                } else if (m) {
                    get_url = log_api + '/' + m
                } else if (d) {
                    get_url = log_api + '/' + d
                } else {
                    get_url = log_api
                }

                this.$nextTick(function () {
                    this.$axios.get(get_url).then(res => {
                        this.tableData = res.data
                    })
                })
            }
        },
        computed: {
            today () {
                return new Date().toJSON().slice(0, 10).replace(/-/g, '-')
            },
            compiledMarkdown () {
                if (this.logContent) {
                    return markdown.toHTML(this.logContent)
                }
            }
        },
        mounted: function () {
            this.loadMans()
            this.loadLogs()
        }
    }
</script>

<style>
    @import url("//unpkg.com/element-ui@1.3.7/lib/theme-default/index.css");

    .el-row {
        margin-bottom: 20px;

    &
    :last-child {
        margin-bottom: 0;
    }

    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>
